<template>
      <el-tabs :stretch="true" v-model="activeName" class="demo-tabs" @tab-change="handleClick">
         <el-tab-pane style="width:100vw" label="滞销" name="unsalable">   </el-tab-pane>
         <el-tab-pane  style="width:100vw" label="断货" name="outStock">   </el-tab-pane>
          <el-tab-pane  style="width:100vw" label="批号" name="batchNumber">   </el-tab-pane>
           <el-tab-pane  style="width:100vw" label="坏货" name="badGoods">   </el-tab-pane>
            <el-tab-pane  style="width:100vw" label="商务渠道" name="businessChannel">   </el-tab-pane>
      </el-tabs>
         <unsalable v-if="activeName=='unsalable'" :pageNum="form.pageNum" :datano="datano" :logdingB="logding" :pagetotal="form.pagetotal" :tableData="detailist" @getdata="getlistdata"></unsalable>
          <outStock  v-if="activeName=='outStock'" :pageNum="form1.pageNum" :datano="datano1" :logdingB="logding1" :pagetotal="form1.pagetotal" :tableData="detailist1" @getdata="getlistdata1"></outStock>
           <batchNumber  v-if="activeName=='batchNumber'" :pageNum="form2.pageNum" :datano="datano2" :logdingB="logding2" :pagetotal="form2.pagetotal" :tableData="detailist2" @getdata="getlistdata2"></batchNumber>
            <badGoods  v-if="activeName=='badGoods'" :pageNum="form3.pageNum" :datano="datano3" :logdingB="logding3" :pagetotal="form3.pagetotal" :tableData="detailist3" @getdata="getlistdata3"></badGoods>
             <businessChannel  v-if="activeName=='businessChannel'" :pageNum="form4.pageNum" :datano="datano4" :logdingB="logding4" :pagetotal="form4.pagetotal" :tableData="detailist4" @getdata="getlistdata4"></businessChannel>
</template>

<script>
import unsalable from './warningTable/unsalable.vue'
import outStock from './warningTable/outStock.vue'
import batchNumber from './warningTable/batchNumber.vue'
import badGoods from './warningTable/badGoods.vue'
import businessChannel from './warningTable/businessChannel.vue'
export default {
components:{
    unsalable,
    outStock,
    batchNumber,
    badGoods,
    businessChannel,
},
data(){
return{
    activeName:'unsalable',
    // 滞销
    form:{
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    },
    datano:true,
    logding:false,
    detailist:[],
// 断货
        form1:{
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    },
    datano1:true,
    logding1:false,
    detailist1:[],
// 批号
        form2:{
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    },
    datano2:true,
    logding2:false,
    detailist2:[],
// 坏货
        form3:{
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    },
    datano3:true,
    logding3:false,
    detailist3:[],
// 商务渠道
        form4:{
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    },
    datano4:true,
    logding4:false,
    detailist4:[],
}
},
created(){
   this.getlistdata()
},
methods:{
    gotodetail(){
        
    },
    handleClick(){
        console.log(this.activeName)
          if(this.activeName == 'unsalable'){
    this.form = {
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    }
    this.datano = true
    this.logding= false
    this.detailist =[]
       this.getlistdata()
          }else if(this.activeName == 'outStock'){
    this.form1 = {
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    }
    this.datano1 = true
    this.logding1= false
    this.detailist1 =[]
   this.getlistdata1()
          }else if(this.activeName == 'batchNumber'){
    this.form2 = {
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    }
    this.datano2 = true
    this.logding2= false
    this.detailist2 =[]
       this.getlistdata2()
          }else if(this.activeName == 'badGoods'){
    this.form3 = {
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    }
    this.datano3 = true
    this.logding3= false
    this.detailist3 =[]
       this.getlistdata3()
          }else if(this.activeName == 'businessChannel'){
    this.form4 = {
        pageSize:10,
        pageNum:0,
        pagetotal:0,
    }
    this.datano4 = true
    this.logding4= false
    this.detailist4 =[]
       this.getlistdata4()
          }
    },
        // 滞销
        async getlistdata(){
             this.logding =true
             this.form.pageNum++
             this.form = {...this.form}
            let res  =  await this.$API.clientM.customerInfo.unsalableAlertsInfo.post(this.form)
            if(res.code=='0'){
              if(res.data.length<this.form.pageSize){
                  console.log(this.datano)
                this.datano = false
              }
                this.logding = false
                this.form.pagetotal = res.pages
                this.detailist = [...this.detailist,...res.data]
            }
        },
        // 断货
        async getlistdata1(){
             this.logding1 =true
             this.form1.pageNum++
             this.form1 = {...this.form1}
            let res  =  await this.$API.clientM.customerInfo.supplyShortageAlertsInfo.post(this.form1)
            if(res.code=='0'){
              if(res.data.length<this.form1.pageSize){
                this.datano1 = false
              }
                this.logding1 = false
                this.form1.pagetotal = res.pages
                this.detailist1 = [...this.detailist1,...res.data]
                console.log(this.detailist1)
            }
        },
        // 批号
        async getlistdata2(){
             this.logding2 =true
             this.form2.pageNum++
             this.form2 = {...this.form2}
            let res  =  await this.$API.clientM.customerInfo.batchNumberAlertsInfo.post(this.form2)
            console.log(res)
            if(res.code=='0'){
              if(res.data.length<this.form2.pageSize){
                this.datano2 = false
              }
                this.logding2 = false
                this.form2.pagetotal = res.pages
                this.detailist2 = [...this.detailist2,...res.data]
            }
        },
        // 坏货
        async getlistdata3(){
             this.logding3 =true
             this.form3.pageNum++
             this.form3 = {...this.form3}
            let res  =  await this.$API.clientM.customerInfo.badGoodsAlertsInfo.post(this.form3)
            console.log(res)
            if(res.code=='0'){
              if(res.data.length<this.form3.pageSize){
                this.datano3 = false
              }
                this.logding3 = false
                this.form3.pagetotal = res.pages
                this.detailist3 = [...this.detailist3,...res.data]
            }
        },
        // 商务渠道
        async getlistdata4(){
             this.logding4 =true
             this.form4.pageNum++
             this.form4 = {...this.form4}
            let res  =  await this.$API.clientM.customerInfo.riskAlertsInfo.post(this.form4)
            console.log(res)
            if(res.code=='0'){
              if(res.data.length<this.form4.pageSize){
                this.datano4 = false
              }
                this.logding4 = false
                this.form4.pagetotal = res.pages
                this.detailist4 = [...this.detailist4,...res.data]
            }
        },
}
}
</script>

<style scoped>
/deep/.el-tabs__header{
    margin: 0 !important;
}
/deep/ .el-tabs__item{
    background: var(--el-color-bac);
}
</style>